<template>
  <!-- v-if="animationEnd"  -->
  <div class="event" ref="event">
    <div class="e-text">
      <h4>年度大事记</h4>
      <div>
        <p class="year">2022.1</p>
        <p>移动端可撤销及授权流程，无需切换平台</p>
      </div>
      <div>
        <p class="year">2022.2</p>
        <p>Pad端实现横屏、分屏操作</p>
      </div>
      <div>
        <p class="year">2022.2</p>
        <p>流程表单可一键上传，轻松便捷</p>
      </div>
      <div>
        <p class="year">2022.4</p>
        <p>邮件附件上传无障碍，轻松去焦虑</p>
      </div>
      <div>
        <p class="year">2022.5</p>
        <p>差旅订单实时查，出差小帮手来帮忙</p>
      </div>
      <div>
        <p class="year">2022.5</p>
        <p>iChangan叫你在线交党费了，党的关怀常伴身边</p>
      </div>
      <div>
        <p class="year">2022.6</p>
        <p>靠脸真的能吃饭了！你的颜值，就是正义</p>
      </div>
      <div>
        <p class="year">2022.10</p>
        <p>人才画像，比你更了解你自己</p>
      </div>
      <div>
        <p class="year">2022.11</p>
        <p>财务共享100%线上及移动审批，省钱又省力</p>
      </div>
      <div>
        <p class="year">2022.11</p>
        <p>合同线上签了，无需“两地奔波”</p>
      </div>
    </div>
    <img class="e-bg" src="@/assets/img/event/bg.png" />
    <img class="e-star-big" src="@/assets/img/event/star-big.png" />
    <img class="e-star-small" src="@/assets/img/event/star-small.png" />
  </div>
  <!-- <EventIntro v-else @animation-end="handleAnimationEnd" /> -->
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { slideUp, slideDown } from "../../../../utils/slide";
// import { changeStatusBarColor } from "@/cordova/common";

const emit = defineEmits(["slideUp", "slideDown"]);

const event = ref<any>(null);

watch(event, () => {
  slideUp(event.value, () => {
    console.log("event");
    emit("slideUp");
  });
  slideDown(event.value, () => {
    emit("slideDown");
  });
});

// const animationEnd = ref(false);

// const handleAnimationEnd = () => {
//   animationEnd.value = true;
//   changeStatusBarColor([68, 168, 252, 1]);
// };
</script>

<script lang="ts">
// import EventIntro from "./components/Intro.vue";

export default {
  name: "EventPage",
};
</script>

<style lang="scss" scoped>
.event {
  @include full-screen-relative;
}

.e-text {
  @include animation-fade-in;
  position: absolute;
  top: 150px;
  left: 64px;
  z-index: 999;
  padding-right: 64px;
  color: #ffffff;
  font-family: ChangAnunitype;

  h4 {
    margin: 0;
    margin-bottom: 40px;
    font-size: 48px;
    font-weight: bold;
  }

  div {
    margin-bottom: 20px;

    p {
      line-height: 40px;
    }
  }
}

img {
  position: absolute;
}

.e-bg {
  @include animation-fade-in;
  bottom: 0;
  left: 0;
  height: 1083px;
  width: 100vw;
}

.e-star-big {
  @include animation-bg-twinkle(4s);
  bottom: 366px;
  right: 64px;
  height: 208px;
  width: 210px;
  opacity: 0.7;
}

.e-star-small {
  @include animation-infinite-rotate(6s);
  top: 176px;
  right: 186px;
  height: 51px;
  width: 52px;
}</style>
